<template>
	<view class="container">
		<view class="tip">温馨提示：一个联盟账号只能授权给一个【悟空淘助手】账号</view>
		<view class="ul">
			<view class="li" v-for="(item, index) in prodData.list" :key="index">
				<view class="top flex-between">
					<view>{{item.account}}</view>
					<text :style="isExpress(index) ? 'color: red !important' : ''">{{item.expireTime}}{{isExpress(index) ? '已': ''}}到期</text>
				</view>
				<view class="bom flex-between">
					<CountDown :ref="'countDown' + index"></CountDown>
					<view class="right">
						<view class="btn order" @click="countDown(index)">采集历史订单</view>
						<view class="btn refresh" @click="authShow = true">更新授权</view>
						<view class="btn del" @click="openDel(item.id)">删除</view>
					</view>
				</view>
			</view>
			<!-- 加载文案 -->
			<LoadMore :loading="loading" :finished="finished" :empty="empty"></LoadMore>
		</view>
		<view class="auth">
			<view class="btn" @click="authShow = true">新增联盟账号</view>
			<view class="auth-tip" @click="openTip"><text class="iconfont" style="color: #999999">&#xe61d;</text>授权说明</view>
		</view>
		<!-- 扫码客服弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="授权账号授权" :show="authShow" :showConfirmButton="false" closeOnClickOverlay
		 @close="closeAuth">
			<view class="vip-container">
				<image src="../../static/my/option.gif" mode=""></image>
				<view class="step">
					<view>授权步骤：</view>
					<view>步骤1.首先点击下方<text>【复制授权链接】</text>按钮。</view>
					<view>步骤2.用<text>浏览器打开</text>已经复制好的链接。</view>
					<view>步骤3.登录要授权的联盟账号密码，点击【授权并登陆】，</view>
					<view>即为授权成功。</view>
				</view>
				<view class="copy" :class="[isCopy ? 'copy-c' : '']" @click="copy">{{isCopy ? '复制成功，前往浏览器打开链接授权' : '复制授权链接'}}</view>
				<view class="last" @click="authed">我已授权</view>
			</view>
		</van-dialog>
		<!-- 删除弹窗 -->
		<van-dialog class="custom-dialog-del" use-slot title="确定删除联盟账号？" :show="delShow" :showConfirmButton="false" closeOnClickOverlay
		 @close="delShow = false">
			<view class="vip-container">
				<view class="tip tc">删除后想查看该联盟信息，需要重新授权哦！</view>
				<view class="options flex-center">
					<view class="btn cancel" @click="delShow = false">取消</view>
					<view class="btn submit" @click="del">确定</view>
				</view>
			</view>
		</van-dialog>
		<!-- 日期弹窗 -->
		<van-popup :round="true" :show="dateShow" position="bottom" custom-style="background: #FAFAFA; border: none; max-height: 42%; overflow: auto;"
		 close-on-click-overlay :overlay="true" @close="closeDate">
			<view class="li-title date-item">请选择</view>
			<view class="date-item" v-for="(item, index) in dateList" :key="index" @click="pick(index)">
				采集{{item}}
			</view>
			<view class="date-item date-cancle" @click="dateShow = false">取消</view>
		</van-popup>
		
		<!-- 回到顶部 -->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont">&#xe7ed;</text>
			<text class="text">置顶</text>
		</view>
	</view>
</template>

<script>
	import moment from '@/utils/moment'
	import LoadMore from '@/components/LoadMore.vue'
	import {tip} from '@/utils/tip'
	import {loading, loaded} from '@/utils/tip'
	import { dateFormat2 } from '@/utils/index'
	import CountDown from '@/components/CountDown.vue'
	export default {
		components: {
			LoadMore,
			CountDown
		},
		data() {
			return {
				authShow: false,
				delShow: false,
				dateShow: false,
				params: {
					page: 1,
					size: 10,
					order: '',
					sort: '',
					userId: '',
					keyWord: ''
				},
				pickParams: {}, 
				prodData: {
					list: [],
					pagination: null
				},
				loading: false,
				finished: false,
				empty: false,
				id: '',
				link: '',
				isCopy: false,
				curOrder: 0,
				dateList: ['今天', '最近3天', '最近7天', '最近15天'],
				isShowScrollTop: false
			};
		},
		onLoad() {
			this.getData()
			this.getLink()
		},
		onPageScroll(e) {
			if (e.scrollTop > 350) {
				this.isShowScrollTop = true;
			} else {
				this.isShowScrollTop = false;
			}
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			if (this.finished) return
			this.params.page++
			this.loading = true
			this.getData()
		},
		methods: {
			// 授权是否过期
			isExpress(index) {
				console.log(moment(this.prodData.list[index].expireTime).isBefore(moment()))
				return moment(this.prodData.list[index].expireTime).isBefore(moment())
			},
			getData() {
				loading()
				this.$service.taobao.page(this.params).then((res) => {
					this.prodData.list = this.prodData.list.concat(res.list)
					this.prodData.pagination = res.pagination
					this.prodData.subData = res.subData
					this.loadMore(res)
					loaded()
				}).catch((res) => {
					loaded()
				})
			},
			//列表加载的一些逻辑判断
			loadMore(res) {
				if (res.list.length < this.params.size) this.finished = true
				if (this.prodData.list.length === 0) this.empty = true
				this.loading = false
			},
			// 清楚数据
			clear() {
				this.params.page = 1
				this.prodData.list = []
				this.loading = false
				this.finished = false
				this.empty = false
			},
			openDel(id) {
				this.delShow = true
				this.id = id
			},
			del() {
				this.$service.taobao.deletes({ids: this.id}).then((res) => {
					this.delShow = false
					this.clear()
					this.getData()
				}).catch(() => {
					
				})
			},
			// 获取授权连接
			getLink() {
				this.$service.taobao.getLink({type: 'web'}).then((res) => {
					this.link = res
				}).catch((err) => {
					
				})
			},
			copy() {
				let that = this
				uni.setClipboardData({
				    data: this.link,
				    success: function () {
				         that.isCopy = true
				    }
				});
			},
			closeAuth() {
				this.authShow = false
				this.isCopy = false
			},
			authed() {
				this.isCopy = false
				this.authShow = false
				this.clear()
				this.getData()
			},
			openTip() {
				uni.showModal({
				    content: '阿里妈妈系统限制每次授权有效期为30天，授权快到期时，请及时更新授权，以免功能失效。',
				    success: function (res) {}
				});
			},
			// 采集订单
			pick(index) { 
				//采集中不重复触发
				if (this.$refs['countDown' + this.curOrder][0].isloading ) {
					uni.showToast({
						title: '正在采集中',
						icon: 'none'
					})
					this.dateShow = false
					return false
				} 
				this.pickParams = {
					...dateFormat2(index)
				}
				this.pickParams.id = this.id
				this.pickParams.queryType = 1
				this.$refs['countDown' + this.curOrder][0].start()		
				this.$service.taobao.fetchOrder(this.pickParams).then((res) => {
					this.ordering = true
				}).catch((err) => {
					this.$refs['countDown' + this.curOrder][0].isloading = false
					this.$refs['countDown' + this.curOrder][0].text = '采集失败'
				})
				this.dateShow = false
			},
			closeDate() {
				this.dateShow = false
			},
			// 采集订单
			// pickOrder() {
			// 	this.pickParams.id = this.id
			// 	this.pickParams.queryType = 1
			// 	this.$servie.taobao.fetchOrder(this.params).then((res) => {
					
			// 	}).catch((err) => {
					
			// 	})
			// },
			// 点击采集订单按钮
			openDate(index) {
				this.curOrder = index
				this.dateShow = true
			},
			countDown(index) {
				console.log('index', index)
				this.curOrder = index
				this.dateShow = true
			},
			// 回到顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding: 28rpx 24rpx;
	.tip {
		font-size: 20rpx;
		color: #999999;
	}
	.ul {
		padding-bottom: 150rpx;
		.li {
			border-radius: 8rpx;
			margin-top: 24rpx;
			background-color: white;
			padding: 28rpx;
			.top {
				margin-bottom: 34rpx;
				view {
					font-weight: bold;
					font-size: 28rpx;
					color: black;
				}
				text {
					font-size: 20rpx;
					color: #999999;
				}
			}
			.bom {
				.right {
					display: flex;
				}
				.btn {
					padding: 10rpx 16rpx;
					border: 2rpx solid;
					border-radius: 24rpx;
					text-align: center;
					margin-right: 12rpx;
					font-size: 24rpx;
				}
				.del {
					// width: 126rpx;
					color: #FE0000;
					border-color: #FFECE5;
				}
				.refresh {
					// width: 126rpx;
					border-color: #E6EEFF;
					color: #0C5DFF;
				}
				.order {
					// width: 168rpx;
					border-color: #E6EEFF;
					color: #0C5DFF;
				}
				.ing {
					background-color: #FFECE5;
					color: $main-color;
				}
				.done {
					background-color: $main-color;
					color: white;
				}
			}
		}
	}
	.auth {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 36rpx;
		margin: 0 auto;
		.btn {
			margin: 0 auto;
			width: 342rpx;
			height: 72rpx;
			border-radius: 42rpx;
			background-color: $main-color;
			line-height: 72rpx;
			color: white;
			text-align: center;
			margin-bottom: 26rpx;
			font-size: 28rpx;
		}
		.auth-tip {
			color: #999999;
			text-align: center;
			text {
				margin-right: 6rpx;
			}
		}
	}
	/deep/ .custom-dialog {
		.van-dialog__header {
			padding-top: 28rpx;
		}
		.vip-container {
			image {
				width: 524rpx;
				height: 476rpx;
				margin: 0 auto;
				display: block;
				margin-bottom: 22rpx;
			}
			.step {
				padding-left: 38px;
				view {
					color: #666666;
					line-height: 1.5em;
				}
				text {
					color: #0C5DFF;
				}
			}
			.copy {
				width: 428rpx;
				height: 72rpx;
				border-radius: 42px;
				background-color: #0C5DFF;
				color: white;
				line-height: 72rpx;
				text-align: center;
				margin: 0 auto;
				margin-top: 20rpx;
				margin-bottom: 18rpx;
			}
			.copy-c {
				background-color: #E6EEFF;
				color: #333333;
			}
			.last {
				color: #0C5DFF;
				text-align: center;
				padding-bottom: 42rpx;
			}
		}
	}
	/deep/ .custom-dialog-del{
		.van-dialog__header {
			padding-top: 28rpx;
		}
		.vip-container {
			padding-bottom: 50rpx;
			.tip {
				color: #666666;
			}
		}
		.options {
			margin-top: 40rpx;
		
			view {
				width: 212rpx;
				height: 72rpx;
				border-radius: 42rpx;
				text-align: center;
				line-height: 72rpx;
			}
		
			.cancel {
				border: 2rpx solid #FFECE5;
				color: #FF5A16;
				margin-right: 10rpx;
			}
		
			.submit {
				background-color: #FF5A16;
				color: white;
				margin-left: 10rpx;
			}
		}
	}
	.date-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: white;
		border-bottom: 2rpx solid #F2F2F2;
	}
	.date-cancle {
		margin-top: 12rpx;
		border: none;
	}
	.li-title {
		margin-bottom: 12rpx;
		border: none;
	}
}
</style>
